<template>
  <div class="wrap">
    <!-- step -->
    <div class="text-center">
      <Steps :current="step" size="small">
        <Step title="确认订单"></Step>
        <Step title="选择支付方式"></Step>
        <Step title="支付成功"></Step>
      </Steps>
    </div>

    <div class="form-wrap mt20" v-if="step==0">
      <table class="product-table">
        <tr>
          <td>产品名称</td>
          <td>云课堂</td>
        </tr>
        <tr>
          <td>产品型号</td>
          <td>教育局版</td>
        </tr>
        <tr>
          <td>技术参数</td>
          <td></td>
        </tr>
        <tr>
          <td>产品价格</td>
          <td>读取代理商等级的价格</td>
        </tr>
      </table>
       <Form :model="formItem" :label-width="120">

        <div class="mt10 clearfix">
          <div class="fl">
            数量：<Input style="width:30px;" v-model="formItem.num" /> 台
          </div>
          <div class="fr">
            <div>应发金额：¥150000.00</div>
            <div class="mt10">优惠券金额：¥10000.00</div>
            <div class="mt10">支付金额：<span class="c4">¥140000.00</span></div>
          </div>
        </div>

        <div class="mt10">
          <Checkbox label="1"></Checkbox>同意购买协议
        </div>

        <FormItem class="mt20">
          <Button type="primary" style="width:160px;" @click="handleSubmit('formCustom')">确认订单</Button>
        </FormItem>

      </Form>
    </div>
    <div class="form-wrap mt20 text-center" v-else-if="step==1">
        <div class="step2-header">
          <p class="pd10 clearfix bg-f5">
            <span class="fl">
              支付1笔订单 &nbsp;&nbsp;&nbsp;&nbsp;
              <a href="javascript:;" class="link-warning" >收起详情</a> 
            </span>
            <span class="fr">
              应付：
              <span class="c4">¥140000.00</span>
            </span>
          </p>

          <p class="pd10 clearfix bg-f5" style="border-top:1px solid #fff;">
            <span class="fl">订单：3232323232323</span>
            <span class="fr">¥2323.00</span>
          </p>
          <p class="pd10 clearfix bg-f5">
            <span class="fl">云服务器ECS（包月）&nbsp;数量：1 &nbsp;时长:1年</span>
            <span class="fl f12 c3">&nbsp;&nbsp;&nbsp;&nbsp;实例：通用型G5系列</span>
            <span class="fr f12 c3">¥140000</span>
          </p>
        </div>

        <div class="mt20 bg-f5 pd10 clearfix" style="padding:20px 10px;">
          <div class="fl">
            <Checkbox>使用余额（剩余¥7800.00）</Checkbox>
          </div>
          <div class="fr">
            支付： ¥14000.00
          </div>
        </div>

        <div class="mt20 pd10 bg-f5 clearfix">
          <div class="fl">其他支付方式</div>
          <div class="fr">
            应付 <strong class="c4">¥14000.00</strong>
          </div>
        </div>
        <div style="border-top:1px solid #fff;padding:20px 10px ;" class="bg-f5">
          <div class="pay-types text-left">
            <span class="active">支付宝/微信</span> &nbsp;|&nbsp;
            <span>个人网银</span>  &nbsp;|&nbsp;
            <span>企业网银</span>  &nbsp;|&nbsp;
            <span>线下付款</span>  
          </div> 
          <div class="mt20 text-left">
            <RadioGroup v-model="payType">
              <Radio label="1"><i class="iconfont iconzhifubaozhifu c1"></i>支付宝支付</Radio>
              <Radio label="2"><i class="iconfont iconweixinzhifu c5"></i>微信支付</Radio>
            </RadioGroup>
          </div>
        </div>

        <div class="mt20 clearfix">
          <div class="fr">应付金额：¥300000.00 - 使用余额：¥90000.00</div>
        </div>
        <div class="mt20 clearfix">
          <div class="fr">实付金额：
            <span class="c4 f20">¥210000.00</span>
          </div>
        </div>
        <div class="mt20">
          <Button type="primary" style="width:160px;" @click="confirmPay">确认支付</Button>
        </div>
    </div>

    <div class="text-finish text-center" v-else>
      恭喜您，支付成功！
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'

  export default {
    components: {
      VDistpicker
    },
    mounted() {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data() {
      return {
        payType: '1',
        step: 0,
        select: '1',
        position: [{
            title: '代理商管理',
            link: '/admin/agent'
          },
          {
            title: '产品管理',
            link: '/admin/agent/product'
          },
          {
            title: '购买产品'
          }
        ],
        formItem: {
          imput: '',
          select: '1',
          num: 1
        }

      }
    },
    methods: {
      selectProvince(p) {

      },
      selectCity(c) {

      },
      selectArea(a) {

      },
      handleSubmit() {
        this.step = 1
      },
      confirmPay () {
        this.step = 2
      }
    }
  }
</script>

<style lang="less" scoped>
  .wrap {
    padding: 40px;
    width: 600px;
    margin: auto;
  }

  .form-wrap {
    margin: 40px auto;
    width: 600px;
  }

  .desc {
    margin-top: 70px;
    line-height: 1.9;
    text-align: left
  }

  .text-finish {
    padding: 100px 0;
  }

  .product-table {
    background: #f2f3f4;
    width: 100%;
    border-collapse: collapse;

    td {
      padding: 14px;
      border: 1px solid #fff;
    }
  }

  .divieder {
    height: 1px;
    background: #ddd;
    margin: 20px 0;
  }

  .bg-f5{
    background: #f5f5f5;
  }
  .pay-types{
    span{
      cursor: pointer;
      &:hover, &.active{
        color: #1f80e2;
      }
    }
  }
</style>
